<template>
    <div class="permission">
      <div class="operate">
        <div>
          <div style="flex: 0 0 auto">
            <ep-search
                v-model="queryParam.h1909"
                :size="size"
                placeholder="请输入县市区名称"
                enter-button="chaxun"
                @search="
                () => {
                  this.findList();
                }
              "
            ></ep-search>
          </div>

          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="refresh.svg"
              @click="
              () => {
                this.flushPage();
              }
            "
          ></ep-button>
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="add.svg"
              @click="
              () => {
                this.addXqTj();
              }
            "
          >新增</ep-button
          >
        </div>
        <div>
          <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="export.svg"
              @click="
              () => {
                this.exportExcel();
              }
            "
          >导出</ep-button
          >
        </div>
      </div>
      <a-modal
          :title="modalTitle"
          centered
          style="margin-top:100px;"
          width="65%"
          height="80%"
          destroyOnClose
          v-model="visible"
          cancelText="关闭"
          okText="保存"
          @ok="handleOk"
          @cancel="handleCancel"
      >
      <zh-row :span="24" :gutter="[16,16]">
        <zh-col>
                <zh-form  ref="formInfo"  :model="formInfo"  labelAlign="right" >
                  <zh-input
                      prop="b0122"
                      type="select"
                      :options="sqData"
                      :defaultFields="{ label: 'orgName', value: 'orgId' }"
                      label="县市区"
                      v-model="formInfo.b0122"
                      @change="handleChangeB0122"
                  ></zh-input>
                      <zh-input prop="h1902" label="湿度监测" type="text" placeholder="湿度监测" v-model="formInfo.h1902" ></zh-input>
                      <zh-input prop="h1903" label="水位监测"  type="text" placeholder="水位监测" v-model="formInfo.h1903" ></zh-input>
                      <zh-input prop="h1904" label="风蚀监测"   placeholder="风蚀监测" v-model="formInfo.h1904" ></zh-input>
                      <zh-input prop="h1905" label="位移监测"  type="text"  placeholder="位移监测" v-model="formInfo.h1905" ></zh-input>
                      <zh-input prop="h1906" label="形变监测"  type="text" placeholder="形变监测" v-model="formInfo.h1906" ></zh-input>
                      <zh-input prop="h1907"  label="视频监测"   type="text" placeholder="视频监测" v-model="formInfo.h1907"  ></zh-input>
<!--                      <zh-input prop="h1908"  label="数量"     type="number" placeholder="数量" v-model="formInfo.h1908"  ></zh-input>-->
                </zh-form>
            </zh-col>
        </zh-row>
      </a-modal>
      <div class="ep-table" style="height: 450px">
        <zh-table
            ref="tableList"
            style="width: 100%"
            :data="tableData"
            height="auto"
            rowId="roleId"
            type="paging"
            :url = "tableUrl"
            :columns="tableColumn"
        >
          <template #filter="{ $panel, column }">
            <input
                type="type"
                v-for="(option, index) in column.filters"
                :key="index"
                v-model="option.data"
                @input="$panel.changeOption($event, true, option)"
            />
          </template>
          <template #operate="{ row }">
            <div class="alert-message">
              <i class="fa fa-exclamation-circle alert-message-icon"></i>
              <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="edit(row)">编辑</ep-button>
              </span>
              <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="del(row)" >删除</ep-button>
              </span>
            </div>
          </template>
        </zh-table>
      </div>
    </div>
  </template>
  <script>
  import modal from "ant-design-vue/es/modal";
  import {
    getSbTj,
    saveSbTj,
    deleteSbTj,
    updateSbTj,
    getPermissionParams, getSQAndJD,
  } from "@/services/system/whdngxlApi";
  import ZhTable from "@/components/zh-table/ZhTable";
  const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  import { getBatchDict } from "@/services/system/api";
  import ColumnManage from "@/components/assembly/columnManage";
  import {mapGetters} from "vuex";
  import {TreeSelect} from "ant-design-vue";
  export default {
    name: "XqTjManager",
    components: {
      ZhTable,
      ColumnManage
    },
    computed: {
      ...mapGetters(['size']),
    },
    data() {
      return {
        dictData: {},
        modalTitle:'',
        labelCol: { sm: { span: 2 }, md: { span: 2 }, xs: { span: 24 }, lg: { span: 2 }, xl: { span: 2 }, xxl: { span: 2 } },
        wrapperCol: { sm: { span: 22 }, md: { span: 22 }, xs: { span: 24 }, lg: { span: 22 }, xl: { span: 22 }, xxl: { span: 22 } },
        queryParam: {
          h1909:'',
        },
        formInfo:{},
        tableColumn: [
          // { type: "checkbox", width: 50, fixed: "left", visible: true },
          {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号',visible: true},
          {field: "h1909",title: "县市区名称",align: "center",width: 100,visible: true,},
          {field: "h1902",title: "湿度监测",align: "center",width: 200,visible: true,},
          {field: "h1903",title: "水位监测",align: "center",width: 150,visible: true,},
          {field: "h1904",title: "风蚀监测",align: "center",width: 150,visible: true,},
          {field: "h1905",title: "位移监测",align: "center",width: 150,visible: true,},
          {field: "h1906",title: "形变监测",align: "center",width: 150,visible: true,},
          {field: "h1907",title: "视频监测",align: "center",width: 150,visible: true,},
          // {field: "h1908",title: "数量",align: "center",width: 150,visible: true,},
          {field: "operate",title: "操作",fixed: "right",align: "center",width: 300, slots: { default: "operate",},visible: true, },
        ],
        tableData: [],
        visible: false,
        loading: false,
        tableUrl: getSbTj,
        taskAreaTree:[],
        sqData: [],
        jdData: {},
        jdDataArray: [],
        SHOW_PARENT,
      };
    },
    created() {
      const param = {}
      param.dictFields = 'XZQH'
      this.$http.post(getBatchDict, param).then(res => {
        this.dictData = res.result
      })
      this.$http.post(getPermissionParams, {}).then((res) => {
        const data = res.result;
        this.taskAreaTree = data.orgTreeData;
      });
    },
    mounted(){
        this.findList()
        this.init()
      },
    methods: {
      init(){
        this.$http.post(getSQAndJD, {}).then((res) => {
          this.sqData = res.result.sqData;
          this.jdData = res.result.jdData;
          if (this.formData && this.formData.b0122) {
            this.jdDataArray = this.jdData[this.formData.b0122];
          }
        });
      },
      handleChangeB0122(orgId, option) {
        this.jdDataArray = this.jdData[orgId];
        for (const item of option) {
          if (item.orgId === orgId) {
            this.formInfo.h1909 = item.orgName;
            break;
          }
        }
      },
      handleOk() {
        if(this.formInfo.h1901){
              const param = this.formInfo
              this.$http.post(updateSbTj, param).then(res => {
              if(res.code === 0){
                modal.info({title: '成功提示', content: '修改成功'});
                this.findList()
              }else{
                modal.info({title: '失败提示', content: '修改失败'});
              }
              this.visible = false
            })
          }else{
            const params = this.formInfo
            this.$http.post(saveSbTj,params).then(res => {
              if(res.code === 0){
                modal.info({title: '成功提示', content: '保存成功'});
                this.findList()
              }else{
                modal.info({title: '失败提示', content: '保存失败'});
              }
              this.visible = false
            })
          }
      },
      handleCancel() {
        this.visible = false;
      },
      showOrHide() {
        this.visible = !this.visible;
      },
      findList() {
        this.$refs.tableList.query(this.queryParam)
      },
      addXqTj() {
        this.modalTitle = '新增'
        this.formInfo = {}
        this.showOrHide();
      },
      del(row) {
        modal.confirm({
          title: "确认删除该条信息吗？",
          onOk: () => {
            // eslint-disable-next-line no-debugger
            debugger
            const params = row;
            this.$loading.show("正在处理数据,请等待...");
            setTimeout(() => {
              this.$http
                  .post(deleteSbTj, params)
                  .then((res) => {
                    this.$message.info("删除成功");
                    this.$loading.hide();
                    this.findList()
                  })
                  .catch((error) => {
                    console.log(JSON.stringify(error));
                    this.$loading.hide();
                  })
                  .finally(() => {});
            }, 50);
          },
          onCancel: () => {},
        });
      },
      exportExcel() {
        this.$refs.tableList.exportData("违法案件信息",'xls')
      },
      flushPage() {
        this.queryParam = {}
        this.findList();
      },
      //查看
      view(row) {
        this.modalTitle = '查看预警信息'
        this.showOrHide();
        this.formInfo = row
      },
      edit(row) {
        this.modalTitle = '编辑'
        this.showOrHide();
        this.formInfo = row
      },
      columnChange() {
        this.$refs.tableList.refreshColumn();
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .permission {
    //padding: 15px 20px 0;
    height: 100%;
    .desc,
    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      > div {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
      }
    }
    .desc {
      margin-bottom: 20px;
    }

    .operate {
      margin-bottom: 15px;
      .field {
        flex: 0 0 auto;
        position: relative;
        margin-left: 15px;
        .field-box {
          position: absolute;
          top: 40px;
          left: 0;
          right: -40px;
          z-index: 99;
          border: 1px solid #2175a9;
          background: #002a44;
          border-radius: 5px;
          ul {
            padding: 10px;
            li {
              padding: 1px 0;
            }
          }
          .btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            border-top: 1px solid #2175a9;
            color: #fff;
            p {
              flex: 1;
              text-align: center;
              cursor: pointer;
              &:hover {
                color: #49bbeb;
              }
            }
          }
        }
      }
    }
    .ep-table {
      height: calc(100% - 60px);
    }
  }
  // /*表格 筛选-输入框*/
  // ::v-deep .vxe-table--filter-wrapper {
  //   input {
  //     background: #002a44;
  //     padding-left: 6px;
  //     line-height: 32px;
  //     box-shadow: none !important;
  //     border: none !important;
  //   }
  // }
  </style>
